<template>
  <div class="basic-info">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      size="large"
    >
      <el-form-item label="工作流名称" prop="name" required>
        <el-input
          v-model="formData.name"
          placeholder="请输入工作流名称"
          clearable
          maxlength="50"
          show-word-limit
        />
        <div class="field-hint">
          工作流的唯一标识名称，用于区分不同的工作流程
        </div>
      </el-form-item>

      <el-form-item label="工作流简介" prop="description" required>
        <el-input
          v-model="formData.description"
          type="textarea"
          placeholder="请输入工作流的详细描述，包括用途、适用场景等"
          :rows="4"
          resize="vertical"
        />
        <div class="field-hint">
          详细描述工作流的用途、适用场景和主要功能
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { BasicInfo } from '/@/components/BasicInfo/types/index'

// Props and Emits
interface Props {
  modelValue: BasicInfo
}

interface Emits {
  (e: 'update:modelValue', value: BasicInfo): void
  (e: 'validate', isValid: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// Refs
const formRef = ref<FormInstance>()

// Form data - 直接使用props的值，避免复杂的同步逻辑
const formData = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// Form validation rules - 简化验证规则
const formRules: FormRules = {
  name: [
    { required: true, message: '请输入工作流名称', trigger: 'blur' },
    { min: 2, max: 50, message: '工作流名称长度应在 2-50 个字符之间', trigger: 'blur' },
  ],
  description: [
    { required: true, message: '请输入工作流简介', trigger: 'blur' },
  ],
}

// Computed
const isFormValid = computed(() => {
  return formData.value.name.trim() !== '' && 
         formData.value.description.trim() !== '' &&
         formData.value.name.length >= 2
})

// 简化的验证函数
const validateForm = async () => {
  if (!formRef.value) return false
  
  try {
    await formRef.value.validate()
    return isFormValid.value
  } catch {
    return false
  }
}

// 简化的watch - 只监听表单有效性变化
watch(isFormValid, (newValue) => {
  emit('validate', newValue)
}, { immediate: true })

// Expose methods for parent component
defineExpose({
  validate: validateForm,
  resetFields: () => formRef.value?.resetFields(),
})
</script>

<style scoped>
.basic-info {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.field-hint {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .basic-info {
    padding: 16px;
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-input__wrapper) {
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-textarea__inner) {
  transition: all 0.3s ease;
}

:deep(.el-textarea__inner:hover) {
  border-color: #c0c4cc;
}
</style>